<template>
  <div class="app-container">
  <div class="device-map-box">
    <div class="device-map-main">
      <div class="device-map-main-content">
        <div class="device-map-map-box">
          <BMap
              :height="900"
              :zoom="zoom"
              :center="position"
              :plugins="['Mapvgl', 'Mapv']"
              :displayOptions="{
      indoor: false,
      poi: true,
      skyColors: ['rgba(5, 5, 30, 0.01)', 'rgba(5, 5, 30, 1.0)']
    }"
              :enableScrollWheelZoom="true"
          >
            <BMarker
                @click="() => handleClick(item)"
                :zIndex="99"
                v-for="item in devices"
                :position="item.position"
                :icon="item.icon"
            />
            <BInfoWindow
                @clickclose="() => handleClickClose()"
                :show="show"
                :position="position"
                title="设备信息"
                enableAutoPan
                enableCloseOnClick>

              <div class="infoWindow-content">
                <div>
                  <p class="item-title">状态：{{ device.status == 1 ? '在线' : '离线' }}</p>
                  <p class="item-title">名称：{{ device.name }}</p>
                  <p class="item-title">设备编号：{{ device.number }}</p>
                  <p class="item-title">所属用户：{{ device.owner }}</p>
                  <p class="item-title">地址：{{ device.address }}</p>
                </div>
                <div>
                  <img width="139" height="104" :src="device.src" alt=""/>
                </div>
              </div>
            </BInfoWindow>
          </BMap>

        </div>
        <div class="device-map-box-right">

          <el-scrollbar height="100%">
            <DeviceListMap @position-event="handlePositionEvent"/>
          </el-scrollbar>
        </div>
      </div>

    </div>
  </div>


  </div>
</template>
<script>

import {BMap, BZoom} from "vue3-baidu-map-gl";
import {getCurrentUserDevices} from "@/api/device";
import DeviceListMap from "./deviceListMap.vue";
import logo from '@/assets/logo/logo.png'

export default {
  name: "deviceMap",
  components: {
    DeviceListMap,
    BMap,
    BZoom
  },
  data() {
    return {
      logo,
      zoom: 10,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      show: false,
      // 遮罩层
      loading: true,
      devices: [],
      position: {lat: 31.08623, lng: 120.84800},
      device: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handler({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 10
    },
    handleClick(item) {
      //更改show的状态为true
      this.show = true
      this.position = item.position
      this.device = item
    },
    handleClickClose(item) {
      this.show = false
    },
    handlePositionEvent(value) {
      //筛选devices符合的数据
      let item = this.devices.filter(item => {
        return item.number == value;
      })[0]
      this.handleClick(item);
    },
    /** 查询设备管理列表 */
    getList() {
      getCurrentUserDevices().then(response => {
        this.devices = response.data.map(item => {
          return {
            id: item.id,
            name: item.name,
            number: item.number,
            owner: item.owner,
            status: item.status,
            src: item.pic,
            address: item.address,
            icon: item.status == 1 ? 'simple_blue' : 'simple_red',
            position: {lat: item.coordinateLat, lng: item.coordinateLon}
          }
        })
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    /** 搜索按钮操作 */
    handleQuery() {

      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      // this.handleQuery();
    },
  }
};

</script>

<style scoped>

.device-map-box {
  width: 100%;
  height: 100%;
  position: relative;
}

.device-map-main {
  /*border: 1px solid orange;*/
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /*justify-content: space-between;*/
  z-index: 99999;
  position: absolute;
}

.device-map-main-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 99999;
  position: relative;
  transition: all ease 0.38s;
}

.device-map-box-right {
  margin-top: 40px;
  background-color: white;
  margin-left: 75%;
  width: 364px;
  height: 740px;
  padding: 8px 2px 2px 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.device-map-map-box {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


</style>
